<template>
  <el-drawer v-model="isOpenWin" class="cupk2-data-form" :append-to-body="true" :with-header="false" size="500px">
    <div class="cupk-form-box">
      <el-form :show-message="true" :model="knowFrom" label-width="auto" ref="ruleFormRef" style="margin: 10px;">
        <div style="display: flex;">
          <el-form-item style="width: 100%;" prop="title" v-if="true" :rules="v.getRules(true, 0, 128)">

            <el-input v-model="knowFrom.title" size="large" style="width: 100%" placeholder="请录入知识标题...">
              <template #prefix>
                <el-icon class="el-input__icon">
                  <Postcard />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-button style="margin-left: 8px;" :loading="isLoadingAiRef"
            @click="doAiCompleteForm('直接生成15字以内的标题', (text: string) => { knowFrom.title = cupkHtmlUtils.removeHtmltags(text); })"
            size="small" circle type="success" icon="MagicStick"></el-button>
        </div>

        <div v-if="knowFrom.id" class="tip-title">
          ID:{{ knowFrom.id }}
        </div>
        <div style="display: flex;">

          <el-form-item style="width: 100%;" prop="docdescribe" v-if="true" :rules="v.getRules(false, 0, 512)">
            <el-input class="tip-input" v-model="knowFrom.docdescribe" style="width: 100%" autosize type="textarea"
              placeholder="请录入知识摘要..." />
          </el-form-item>
          <el-button style="margin-left: 8px;margin-top: 20px;" :loading="isLoadingAiRef"
            @click="doAiCompleteForm('直接生成100字以内的摘要', (text: string) => { knowFrom.docdescribe = cupkHtmlUtils.removeHtmltags(text); })"
            size="small" circle type="success" icon="MagicStick"></el-button>
        </div>

        <tag_form ref="tagFormRef" :know-tags="knowTags"></tag_form>
      </el-form>
      <div style="margin: 20px;">
        <hr />
      </div>
      <div style="text-align: center;">
        <el-button v-loading="isLoading" style="width: 80%;" size="large" @click="submitKnow" type="success" plain>
          <span v-if="!knowFrom.id"> 创建知识</span>
          <span v-if="knowFrom.id"> 更新知识</span>
        </el-button>
      </div>
    </div>
  </el-drawer>
  <ai_msg ref="aiRef" :is-show-msg="false" :start-handle="aiStartHandle" :end-handle="aiEndHandle">
  </ai_msg>
</template>
<script setup lang="ts">
import ai_msg from './ai_msg.vue';
import tag_form from './tag_form.vue';
import Cupk2Request from '@/service/remoteRequests/Cupk2Request';
import v from '@/hook/cupkFormValids';
import type { DataResponse } from '@/types/commons/DataResponse';
import { RequestTypeEnum } from '@/types/commons/RequestTypeEnum';
import { reactive, ref } from 'vue';
import cupkRoutUtils from '@/hook/cupkRoutUtils';
import notice from '@/components/msg/CupkNotice';
import type { Know } from '@/types/knows/Know';
import type { ZhzmTag } from '@/types/knows/ZhzmTag';
import type { SendMsg } from '@/types/ai/SendMsg';
import cupkHtmlUtils from '@/hook/cupkHtmlUtils';
const isOpenWin = ref(false);
const aiRef = ref();
const tagFormRef = ref();
const isLoading = ref(false);
const isLoadingAiRef = ref(false);
const ruleFormRef = ref()
const knowTags = reactive([]) as Array<ZhzmTag>;;

/**
 * AI完善表单
 */
const doAiCompleteForm = (tipword: string, textHandle: (text: string) => void) => {
  const msg = {
    msg: tipword,
    quotingText: cupkHtmlUtils.getMarkDown(props.html),
  } as SendMsg;
  aiRef.value.senMsg(msg, (text: string) => {
    textHandle(text);
  });
}

/**
 * 开始ai调用
 */
const aiStartHandle = () => {
  isLoadingAiRef.value = true;
}
/**
 * 结束ai调用
 */
const aiEndHandle = () => {
  isLoadingAiRef.value = false;
}




const openWin = () => {
  isOpenWin.value = true;
};
const props = defineProps({
  html: {
    type: String,
    required: true,
  },
});
const knowFrom = reactive({
  text: props.html,
  title: '',
  id: '',
  docdescribe: '',
  tags: []
});
const setKnow = (cknow: Know) => {
  if (cknow.title) {
    knowFrom.title = cknow.title;
  }
  if (cknow.docdescribe) {
    knowFrom.docdescribe = cknow.docdescribe;
  }
  if (cknow.id) {
    knowFrom.id = cknow.id;
  }
  if (cknow.tags && cknow.tags.length > 0) {
    Object.assign(knowTags, cknow.tags);
  }
}


/**
 * 校验表单，准备提交
 * @param func
 */
const onSubmitForm = async (func: () => void) => {
  await ruleFormRef.value.validate((valid: boolean) => { if (valid) { func() } });
}

/**
 * 提交知识
 */
const submitKnow = () => {
  onSubmitForm(() => {
    knowFrom.text = props.html;
    knowFrom.tags = tagFormRef.value.getTags();
    Cupk2Request.submit('api/wknow', RequestTypeEnum.post, isLoading, knowFrom).then((response: DataResponse) => {
      const know = response.data as { id: string };
      cupkRoutUtils.openPageByPathId('/knowview', know.id, '_self');
    }).catch((msg: string) => {
      notice.byError(msg);
    });
  });
}

defineExpose({
  openWin, setKnow
});
</script>
<style scoped>
/* 样式可以根据需要添加 */
.cupk-form-box {
  padding: 20px;
}

.tip-title {
  font-size: 12px;
  margin-top: 20px;
  color: #dddddd;
}

.tip-input {
  margin-top: 20px;
}
</style>
